---
interface Props {
    showHL?: boolean
}

const { showHL = false } = Astro.props as Props
---

<row gap-="1" align-="center" cap-="round" id="vim-navigation">
    <span>&#xe62b;</span>
    {
        showHL && (
            <button size-="sm" variant-="background2" id="btn-h">
                h
            </button>
        )
    }
    <button size-="sm" variant-="background2" id="btn-j">j</button>
    <button size-="sm" variant-="background2" id="btn-k">k</button>
    {
        showHL && (
            <button size-="sm" variant-="background2" id="btn-l">
                l
            </button>
        )
    }
    <button size-="sm" variant-="background2" id="btn-slash">/</button>
</row>

<style>
    #vim-navigation {
        padding: 0 1ch;
        background-color: var(--background1);
        box-shadow: 1ch 0.5lh 0 0 var(--mantle);

        button[size-='sm'] {
            padding: 0 1ch;
        }
    }

    @media (max-width: 64ch) {
        #vim-navigation {
            display: none;
        }
    }
</style>

<script>
    import { isUserTyping } from '@/utils/vim'

    const content = document.querySelector('main') as HTMLElement
    const buttonH = document.querySelector('#btn-h') as HTMLButtonElement
    const buttonJ = document.querySelector('#btn-j') as HTMLButtonElement
    const buttonK = document.querySelector('#btn-k') as HTMLButtonElement
    const buttonL = document.querySelector('#btn-l') as HTMLButtonElement
    const buttonSlash = document.querySelector(
        '#btn-slash',
    ) as HTMLButtonElement

    buttonJ.addEventListener('click', () => content?.scrollBy(0, 1))
    buttonK.addEventListener('click', () => content?.scrollBy(0, -1))
    buttonSlash.addEventListener('click', () => {
        // Execute / key press
        content?.dispatchEvent(
            new KeyboardEvent('keydown', {
                key: '/',
                bubbles: true,
                cancelable: true,
            }),
        )
    })

    window.addEventListener('keydown', (event) => {
        if (isUserTyping()) return

        if (event.key === 'h' || event.key === 'ArrowLeft') {
            buttonH.setAttribute('variant-', 'foreground1')
        } else if (event.key === 'l' || event.key === 'ArrowRight') {
            buttonL.setAttribute('variant-', 'foreground1')
        } else if (event.key === 'j' || event.key === 'ArrowDown') {
            buttonJ.setAttribute('variant-', 'foreground1')
        } else if (event.key === 'k' || event.key === 'ArrowUp') {
            buttonK.setAttribute('variant-', 'foreground1')
        }
    })

    window.addEventListener('keyup', (event) => {
        if (isUserTyping()) return

        if (event.key === 'h' || event.key === 'ArrowLeft') {
            buttonH.setAttribute('variant-', 'background2')
            buttonH.click()
        } else if (event.key === 'l' || event.key === 'ArrowRight') {
            buttonL.setAttribute('variant-', 'background2')
            buttonL.click()
        } else if (event.key === 'j' || event.key === 'ArrowDown') {
            buttonJ.setAttribute('variant-', 'background2')
            buttonJ.click()
        } else if (event.key === 'k' || event.key === 'ArrowUp') {
            buttonK.setAttribute('variant-', 'background2')
            buttonK.click()
        }
    })
</script>
